<template>
  <div>
    <h3>当前最新的count值为：{{ $store.state.count }}</h3>
    <p>{{ $store.getters.showNum }}</p>
    <button @click="btnHandler1">+1</button>
    <button @click="btnHandler2">+3</button>
    <button @click="btnHandler3">+1 Async</button>
    <button @click="btnHandler4">+3 Async</button>
  </div>
</template>

<script>

// 这里全局共享数据是直接通过 this.$store.state.数据名称 访问的
// 这里触发Mutation中的方法是通过 this.$store.commit(函数名, ...函数参数) 方法
export default {
  data () {
    return {}
  },
  methods: {
    btnHandler1 () {
      this.$store.commit('add')
    },
    btnHandler2 () {
      this.$store.commit('add', 3)
    },
    btnHandler3 () {
      this.$store.dispatch('addAsync')
    },
    btnHandler4 () {
      this.$store.dispatch('addAsync', 3)
    }
  }
}
</script>
